<template>
	<div class="index">
		
		<div class="header">
			庞村镇党建系统
			<router-link to="/pushInfoList">
				<span class="iconfont info">&#xe629;</span>
			</router-link>
		</div>
		<!--数据加载动画 start-->
		<div class="loadingBox" v-show="status == 0">
			<div class="loading">
				<div>loading..</div>
				<div></div>
				<div></div>
			</div>
		</div>
		<!--数据加载动画 end-->
		
		<!--数据加载完成 start-->
		<div class="loadingOver" v-show="status == 1">
			<div class="swiper-box">
				<swiper :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange" loop auto></swiper>
			</div>
	
			<div class="swiperBox-bottom">
				<div class="swiperBox-bottomContent">
					<router-link to="/flowPartyMember" class="routerLink bannerNav">
						<div class="imgBox">
							<img src="../assets/img/flowPartyMember.png" />
						</div>
						<span>流动党员</span>
						<div class="clear"></div>
					</router-link>
				</div>
				<div class="swiperBox-bottomContent swiperBox-bottomContentCopy">
					<router-link to="/deployment" class="routerLink bannerNav">
						<div class="imgBox">
							<img src="../assets/img/deployment.png" />
						</div>
						<span>工作部署</span>
						<div class="clear"></div>
					</router-link>
				</div>
			</div>
	
			<div class="anounce-list">
				<router-link to="/notice" class="routerLink ">
					<div class="more">
						<span class="more-title">通知公告</span>
						<span class="more-icon">更多 ></span>
					</div>
				</router-link>
				<scroller :on-refresh="refresh" class="scrollBox" style="">
					<ul class="anounce-listContent">
						<li class="detailList" v-for="(detailList,index) in detailForm"> 
							<router-link to="" class="routerLink">
								<div class="detailList-title" v-text="detailList.XXTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
								<div class="detailList-info">
									<div class="publishTime fl">发布：<span v-text="substring(detailList.FBTime)">2017-06-22 </span></div>
									<div class="fr">已阅：<span v-text="exchangeArray(detailList.Item[0].ReadUser)">5</span></div>
									<div class="clear"></div>
								</div>
							</router-link>
							<span class="touchId" :dataId="detailList.ID" @click="checkNoticeDetail"></span>
						</li>
					</ul>
				</scroller>
			</div>
		</div>
		<!--数据加载完成 end-->
		
		<commonFooter :activeIndex="0"></commonFooter>
	</div>
</template>

<script>
	import Api from 'assets/js/api';
	import init from '../assets/js/init';
	import commonFooter from './common/footer';
	import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from 'vux';
	import Vue from 'vue'
	import VueScroller from 'vue-scroller'
	Vue.use(VueScroller)

	var api = new Api();
	
	const baseList = [{
		url: 'javascript:',
		img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1927729631,2532576910&fm=26&gp=0.jpg',
		title: '社会主义核心价值观'
	}, {
		url: 'javascript:',
		img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1021017543,41201991&fm=26&gp=0.jpg',
		title: '社会主义核心价值观'
	}, {
		url: 'javascript:',
		img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1318372112,2852015468&fm=26&gp=0.jpg',
		title: '社会主义核心价值观'
	}];

	
	export default {
		name: 'index',
		activated() {
			this.result = localStorage.getItem('result');
			var userRealName = localStorage.getItem('userRealName');//获取用户真实姓名
			var self = this;
			console.log(this.result);
			api.post(api.url.index, {
				Action: 'XXFB_GETXXFBLISTBYAPP',
				p: 1,
				pagecount: 5,
				type: 1,
				szhlcode: self.result
			}).then((response) => {
				console.log(response);
				self.detailForm = response.data.Result;
				var noticeDetailForm =  self.detailForm;
				if(response.status == 200){
					this.status = 1;
				}
			}).catch((error) => {
				console.log(error);
			});
		},
		data() {
			return {
				status:'0',//默认加载状态为0
				demo01_list: baseList,//轮播图的数组
				demo01_index: 0,//默认轮播图播放第一页
				detailForm: '',//接收的数据
				result:'',//身份字段
				
			}
		},
		components: {
			commonFooter,
			Swiper,
			SwiperItem,
			GroupTitle,
			XButton,
			Divider,
		},
		methods: {
			refresh(done) {
	       		var self = this
	        	api.post(api.url.index, {
					Action: 'XXFB_GETXXFBLISTBYAPP',
					p: 1,
					pagecount: 5,
					type: 1,
					szhlcode: self.result
				}).then((response) => {
					console.log(response);
					self.detailForm = response.data.Result;
					if(response.status == 200){
						done();
						this.status = 1;
					}
				}).catch((error) => {
					console.log(error);
				});
	        	
	      	},
			demo01_onIndexChange(index) {
				this.demo01_index = index
			},
			substring(val){
				return val.substr(0,10);
			},
			exchangeArray(val) {
				var Array = val.split(",");
				return Array.length;
			},
			checkNoticeDetail(event){
				localStorage.removeItem("noticeDetailInfoTitle");
				localStorage.removeItem("noticeDetailInfoInfo");
				var self = this;
				var dataId = event.target.getAttribute('dataid');
				console.log(dataId);
				var noticeDetailInfoTitle;
				var noticeDetailInfoInfo;
				for(var i = 0;i < self.detailForm.length; i++){
					if(parseInt(dataId) == self.detailForm[i].ID){
						self.detailTitle = self.detailForm[i].XXTitle;
						var firstExchange = api.firstExchange(self.detailForm[i].Item[0].XXContent);
						self.detailInfo = api.secondExchange(firstExchange);
						noticeDetailInfoTitle = self.detailTitle;
						noticeDetailInfoInfo = self.detailInfo;
					}
				}
				localStorage.setItem("noticeDetailInfoTitle",noticeDetailInfoTitle);
				localStorage.setItem("noticeDetailInfoInfo",noticeDetailInfoInfo);
				//点击次数增加请求
				api.post(api.url.index, {
					Action: 'XXFB_UPDATEXXFBREADUSER',
					szhlcode: this.result,
					P1 :dataId
				}).then((response) => {
					console.log(response);
					self.$router.push('/noticeDetail');
				}).catch((error) => {
					console.log(error);
				});
				
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	@import url("../assets/css/common.css");
	.index {
		height: 100%;
		overflow: hidden;
	}
	
	.index .header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2000;
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #f00;
		color: #fff;
		font-size: 0.75rem;
		text-align: center;
		font-weight: 700;
	}
	
	.index .header .info{
		position: absolute;
		right: 0.5rem;
		color: #fff;
	}
	
	.index .swiper-box {
		width: 100%;
	}
	
	.index .swiperBox-bottom {
		width: 100%;
		height: 3rem;
		overflow: hidden;
	}
	
	.index .swiperBox-bottomContent {
		width: 50%;
		height: 100%;
		float: left;
		text-align: center;
		font-size: 0.5rem;
		color: #333;
		box-sizing: border-box;
		padding: 0.25rem 0.125rem 0 0.25rem;
	}
	.index .swiperBox-bottomContentCopy{
		padding: 0.25rem 0.25rem 0 0.125rem;
	}
	.index .swiperBox-bottomContent .imgBox {
		width: 2rem;
		height: 2rem;
		border: 1px solid transparent;
		border-radius: 50%;
		overflow: hidden;
		float: left;
	}

	.index .swiperBox-bottomContent .imgBox img {
		width: 100%;
		height: 100%;
	}
	.index .bannerNav{
		display: flex !important;
		display: -webkit-flex;
		flex-direction: row;
		-webkit-flex-direction: row;
		align-items: center;
		-webkit-align-items: center;
		justify-content: space-around;
		-webkit-justify-content: space-around;
	}
	.index .bannerNav span{
		font-size: 0.75rem;
	}
	
	.index .anounce-list {
		margin-top: 0.25rem;
		width: 100%;
		box-sizing: border-box;
		padding-left: 0.5rem;
		background-color: #fff;
		position: relative;
	}
	
	.index .more {
		width: 100%;
		height: 1.75rem;
		line-height: 1.75rem;
		box-sizing: border-box;
		border-bottom: 1px solid #e9e9e9;
		overflow: hidden;
		padding-right: 0.5rem;
		position: relative;
		z-index: 2000;
	}
	
	.index .more-title {
		font-size: 0.7rem;
		float: left;
		color: #333;
	}
	
	.index .more-icon {
		float: right;
		color: #666;
		font-size: 0.5rem;
		color: #f00;
	}
	
	.index .anounce-listContent {
		width: 100%;
		box-sizing: border-box;
	}
	
	.index .detailList {
		width: 100%;
		height: initial;
		box-sizing: border-box;
		padding-right: 0.5rem;
		border-bottom: 1px solid #e9e9e9;
		position: relative;
	}
	
	.index .detailList .touchId{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.index .detailList-title {
		width: 95%;
		font-size: 0.65rem;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 0.3rem;
	}
	
	.index .detailList-info {
		width: 100%;
		font-size: 0.5rem;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 0.1rem;
		margin-bottom: 0.3rem;
	}
	
	.index .publishTime {
		margin-right: 0.5rem;
	}
	
	.index .routerLink {
		display: block;
		color: #333;
		height: 100%;
		border-top: 1px solid #fff;
		background-color: #fff;
	}
	
	.index .loadingOver{
		padding-top: 40px;
	}
	
	/*查看信息详情*/
	.index .viewDetail{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2001;
		background-color: rgba(0,0,0,0.5);
		box-sizing: border-box;
		padding: 1rem 1rem 4rem 1rem;
	}
	.index .viewDetailContent{
		width: 100%;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0.5rem;
		text-align: center;
	}
	.index .viewDetailContent-title{
		width: 100%;
		font-size: 0.8rem;
		color: #333;
		text-align: center;
		margin-bottom: 0.5rem;
	}
	.index .viewDetailContent-info{
		width: 100%;
		height: 88%;
		font-size: 0.5rem !important;
		color: #666;
		text-align: left;
		/*text-indent: 1rem;*/
		line-height: 0.8rem;
		display:block;
		word-break: break-all;
		word-wrap: break-word;
		overflow-y: scroll;
	}
	.index .viewDetailContent-info p{
		line-height: 1rem !important;
	}
	.index .viewDetailContent-info p span{
		font-size: 0.5rem !important;
	}
	
	.index .viewDetailContent-info img{
		max-width: 100% !important;
    	width: initial !important;
    	height: initial !important;
	}
	.index .viewDetailContent-info table{
		width: initial !important;
		max-width: 100% !important;
	}
	.index .viewDetailClose{
		position: fixed;
		bottom: 2rem;
		left: 50%;
		margin-left: -0.75rem;
		font-size: 1.5rem;
		color: #fff;
		z-index: 2002;
	}
	
	
	/*加载动画*/
	.loadingBox{
		width: 100%;
		height: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
	.loading {
	    border-radius: 50%;
	    font-size: 20px;
	    height: 100px;
	    line-height: 90px;
	    position: relative;
	    text-align: center;
	    width: 100px;
	}
	.loading > div:nth-child(2) {
	    border-color: #FFF;
	    left: 0px;
	    width: 90px;
	}
	.loading > div:nth-child(3) {
	    border-color: #009933;
	    left: -5px;
	    width: 100px;
	    -webkit-animation-delay: 0.5s;
	    -moz-animation-delay: 0.5s;
	    -ms-animation-delay: 0.5s;
	    -o-animation-delay: 0.5s;
	    animation-delay: 0.5s;
	}
	.loading > div:nth-child(2), .loading > div:nth-child(3) {
	    background-color: rgba(255, 255, 255, 0.2);
	    border: 5px solid #FFF;
	    border-radius: 50%;
	    box-shadow: 0 0 5px 0 #f00;
	    height: 100px;
	    position: absolute;
	    top: 0px;
	    border-top-width: 0;
	    border-bottom-width: 0;
	    -webkit-animation: anim3 2s linear infinite;
	    -moz-animation: anim3 2s linear infinite;
	    -ms-animation: anim3 2s linear infinite;
	    -o-animation: anim3 2s linear infinite;
	    animation: anim3 2s linear infinite;
	}
	@keyframes anim3{
		0% {
		    transform: rotateY(0deg);
		}
		50% {
		    transform: rotateY(180deg);
		}
		100% {
		    transform: rotateY(360deg);
		}
	}


	/*下拉刷新*/
	.scrollBox{
		padding-top: initial !important; 
		margin-top: 1.75rem;
		height: 11rem !important;
		box-sizing: border-box;
		padding-left: 0.5rem;
		background-color: #fff;
		z-index: 0;
		overflow: scroll !important;
		padding-bottom: 4rem;
	}
</style>